{% extends "layouts/base.njk" %}


{% block css %}
{% InlineCss '/css/single-post.css' %}
{% endblock %}

{% block title_bar %}
  {% set sharingEnabled = true %}
  {% include 'partials/breadcrumbs.njk' %}
{% endblock %}

{% set tocContents %}
  {{- content | toc | safe -}}
{% endset %}

{% block content %}
  <div class="display-flex gap-top-300 lg:gap-top-400">
    {% include 'partials/navigation-tree.njk' %}

    {# The article is wrapped again so that the ToC aligns on its right on desktop #}
    <div class="display-flex justify-content-center width-full">
      <article class="stack measure-long width-full pad-left-400 pad-right-400">
        {% if is_outdated %}
          {% include 'partials/post-banner.njk' %}
        {% endif %}

        <div class="stack flow-space-200">
          {% include 'partials/post-headline.njk' %}
        </div>
        {% include 'partials/tags.njk' %}
        {% if authors %}
          <div class="stack-exception-600 lg:stack-exception-700">
            {% include 'partials/post-authors.njk' %}
          </div>
        {% endif %}

        {% include 'partials/toc-inner.njk' %}
        {% include 'partials/draft.njk' %}

        <div class="stack stack--block type center-images">
          {% if reference %}
            <a href={{reference}}>Review the API reference for <code>{{ title }}</code>.</a>
          {% endif %}
          {{ content | safe }}
        </div>

        {% include 'partials/updated.njk' %}
      </article>

      {% include 'partials/toc-side.njk' %}
    </div>
  </div>
{% endblock %}
